﻿@{
    ViewBag.Title = "Profiles";
}
<h2>@ViewBag.Message</h2>
<div id="gridContainer" style="width: 100%; height: 100%">
    <table id="grid">
    </table>
</div>
<div id="gridpager">
</div>
<div id="custom">
</div>
<script type="text/javascript">
    $('#grid').jqGrid({
        url: '@(Url.Action("GetProfiles", "Home"))',
        datatype: 'json',
        colNames: ['Id', 'First Name', 'Last Name', 'Phone Number', 'Email'],
        mtype: 'GET',
        colModel: [
                    { name: 'Id', width: 50 },
                    { name: 'FirstName', width: 200 },
                    { name: 'LastName', width: 200 },
                    { name: 'PhoneNumber', width: 200 },
                    { name: 'Email', width: 200 }
                  ],
        jsonReader: {
            root: 'rows',
            total: 'total',
            page: 'page',
            records: 'records',
            cell: 'cell',
            id: 'id',
            repeatitems: false
        },
        rowNum: 10,
        rowList: [5, 10, 20, 30],
        pager: $('#gridpager'),
        sortname: 'Id',
        viewrecords: true,
        sortorder: 'asc',
        caption: 'Profiles',
        shrinkToFit: true,
        width: $('#gridContainer').width(),
        height: 200,
        ondblClickRow: function (rowid, iRow, iCol, e) {
            var id = $('#' + rowid).children().first().html();
            window.location.assign('@(Url.Action("About"))' + '?Id=' + id.toString())
        },
        hidegrid: false,
        gridComplete: function () {
            $('#gridContainer').find('.ui-jqgrid-titlebar').hide();
        }
    }).navGrid('#gridpager',
    {
        view: false,
        del: false,
        search: false,
        refresh: false,
        add: false,
        edit: false
    }).navButtonAdd("#gridpager",
    {
        caption: "",
        buttonicon: "ui-icon-plus",
        onClickButton: function (e) {
            window.location.assign('@(Url.Action("About"))')
        },
        position: "last",
        title: "",
        cursor: "pointer"
    }).navButtonAdd("#gridpager",
    {
        caption: "",
        buttonicon: "ui-icon-trash",
        onClickButton: function (e) {
            var id = $('#grid').jqGrid('getGridParam', 'selrow');
            
            if (id != null) {
                var idHtml = $('#' + id).children().first().html();
                $.ajax({
                    url: '@(Url.Action("DeleteProfile"))' + '?Id=' + idHtml + '&RowId=' + id,
                    success: function (data) {
                        if (data.Success) {
                            
                            $('#grid').jqGrid('delRowData', data.RowId);
                        }
                    }
                });
            }
            else {
            }
        },
        position: "last",
        title: "",
        cursor: "pointer"
    }).navButtonAdd("#gridpager",
    {
        caption: "",
        buttonicon: "ui-icon-pencil",
        onClickButton: function (e) {
            var id = $('#grid').jqGrid('getGridParam', 'selrow');
            
            if (id != null) {
                var idHtml = $('#' + id).children().first().html();
                window.location.assign('@(Url.Action("About"))' + '?Id=' + idHtml.toString());
            }
            else {
            }
        },
        position: "last",
        title: "",
        cursor: "pointer"
    });
    $(window).on('resize', function () {
        $('#grid').jqGrid('setGridWidth', $('#gridContainer').width());
    });
</script>
